//需要查询出所有顶级菜单展示在桌面，然后再通过各种事件操作来获取下级菜单
//底部菜单栏目需与弹出窗口响应，如果是缩小，则会存在，如果是关闭则需要通过绑定参数来进行地步菜单的清除
//底部菜单需要更简便的方便用户区操作窗口之间的关系和关联
//数据的展示可以借鉴列表类的，或者是其他形式的，需要思考  
//2020-08-13 00:05:00

var main={
		data:{
			windowId:0,//窗口ID
			footerArrayNav:[]//底部菜单集合
		},
		init:function(){
			$.ajax({
				url:"/desktop/list",
				data:{},
				type:"post",
				dataType:"json",
				success:function(result){
					if(result.state==200){
						$("#listicon").html("");
						var data=result.data;
						
						for(var i=0;i<data.length;i++){
							var datas=JSON.stringify(data[i]);
							var liTag="<li> "+
										"<a href='javascript:void(0);' ondblclick='main.openWindowsMenus("+datas+")'>"+
								         " <span class='glyphicon glyphicon-folder-open'></span>"+
								         " <span style='display:block;font-size:14px;'>"+data[i].name+"</span>"+
								        "</a>"+
					        		"</li>";
							$("#listicon").append(liTag);
						}
						iconMouseup();
					}
				},error:function(){
					
				}
			})
		},
		refresh:function(){
			this.init();
		},
		openWindowsMenus:function(data){
			//打开窗口并获取列表数据
			main.data.windowId=data.id;
			if(main.data.footerArrayNav.includes(data.id)){
				Alert.hint("已经打开窗口");
			}else{
				main.data.footerArrayNav.push(data.id);
				var footerNav="<li id='footer"+data.id+"' data-id='"+data.id+"' class='btn btn-info  btn-lg left active' onclick='openWindows(this)'><span>"+data.name+"</span></li>";
				$("#footerNav").append(footerNav);
				main.createWindows(data);
			}
		},
		createWindows:function(data){
			//窗口框架
			console.log(data);
			var windows=document.createElement("div");
			windows.id="windows"+data.id;
			windows.className="menuWindows";
			windows.style="display:block;width:70%;height:60%;position:fixed;background:#fff;left:10%;top:10%;border:1px solid #666;";
			//窗口操作
			var handleNav='<div class="windowstitle left" style="width:100%;height:8%;user-select:none;border-bottom:1px solid #e1e1e1;">'+
							'<h4 class="left" style="text-indent:1em;"><b>'+data.name+'</b></h4>'+
							'<a class="right glyphicon glyphicon-remove" onclick="main.closeWindows(this,'+data.id+')"></a>'+
							'<a class="glyphicon glyphicon-stop right" onclick="fullScreen(this)"></a>'+
							'<a class="right glyphicon glyphicon-minus" onclick="shrink(this)"></a>'+
						'</div>';
			//内容框架
			//id="frames" name="frames" style="width:100%;height:92%;margin:10px;"
			var frames='<div style="width:100%;height:92%;"><object type="text/html" data="/common/main/toPage?page=desktop/list?id='+data.id+'" id="object'+data.id+'" width="100%" height="100%"></object></div>';
			windows.innerHTML=handleNav+frames;
			$(".box").append(windows);
			//document.body.insertBefore(windows,document.body.children[0]);
			windowsMove();
		},
		closeWindows:function(e,id){
			$(e).parent().parent().toggle();
			$("#windows"+id).remove();
			$("#footer"+id).remove();
			var footers=main.data.footerArrayNav;
			for(var i=0;i<footers.length;i++){
				if (footers[i]==id) {
					var idStr=""+id;
					main.data.footerArrayNav.splice(i, idStr.length); 
				} 
			}
		}
}





function clicks(data){
	$("#righthand").remove();
}
function fullScreen(e){
	//窗口全屏
	e=$(e);
	var className=e.parent().parent().prop("class");
	if(className.indexOf("fullScreen")>-1){
		e.parent().parent().css("top","10%");
		e.parent().parent().css("left","10%");
		e.parent().parent().removeClass("fullScreen");
	}else{
		e.parent().parent().css("top","0px");
		e.parent().parent().css("left","0px");
		e.parent().parent().addClass("fullScreen");
	}
	
}

function openWindows(e){
	//打开窗口
	console.log(e);
	var id=$(e).data("id");
	$(e).parent().find("li").each(function(){
		if($(this).prop("class").indexOf("active")>-1){
			$(this).removeClass("active");
		}
	})
	$(e).addClass("active");
	$("#windows"+id).toggle();
	//$("#frame").prop("src",$(e).data("url"));
}


$("#content").click(function(){
	$("#footerlist").hide(300);
})
$(document).contextmenu(function(e){
	 e.preventDefault();
})
$(".box").contextmenu(function(e){
	$("#footerlist").hide(300);
    e.preventDefault();
});
$("#listicon").find("li").contextmenu(function(e){
	$("#footerlist").hide(300);
    e.preventDefault();
});
$("#righthand").contextmenu(function(e){
	$("#footerlist").hide(300);
	e.preventDefault();
});
$("#footericon #winMenu").click(function(){
	$("#footerlist").toggle(300);
})
//窗口拖动
	var leftValue=0;
	var topValue=0;
function windowsMove(){
	
	$(".windowstitle").mousedown(function(ev){
		var parent=$(this).parent();
		
		var disX = ev.pageX - $(this).offset().left;//求出鼠标距离拖拽的div左边框的距离；
	    var disY = ev.pageY - $(this).offset().top;
		$(".box").mousemove(function(e){
			var right=$(this).width()-parent.width();//窗口可离左边的距离
			var bottom=$(this).height()-parent.height();//窗口可离顶部的距离
			var footerHeight=$("#footericon").height();
			//bottom=bottom-footerHeight;
			//console.log(footerHeight);
			if(parseInt(parent.offset().left)>0){
				if((e.pageX-disX)>0&&(e.pageX-disX)<right){
						parent.css("left",e.pageX-disX);
				}
				
			}
			if(parseInt(parent.offset().top)>0){
				if((e.pageY-disY)>0&&(e.pageY-disY)<bottom){
					parent.css("top",e.pageY-disY);
				}
				
			}
//			if(right<1){
//				parent.css("left","577px");
//			}
//			if(bottom<1){
//				parent.css("bottom","1px");
//			}
			//全屏开始
			var classNames=parent.prop("class");
			if(classNames.indexOf("fullScreen")==-1&&parseInt(parent.offset().top)==0&&e.pageY>topValue){
				if((e.pageY-disY)>0){
					parent.css("top",e.pageY-disY);
				}
				
			}
			if(classNames.indexOf("fullScreen")==-1&&parseInt(parent.offset().left)==0&&e.pageX>leftValue){
				if((e.pageX-disX)>0){
					parent.css("left",e.pageX-disX);
				}
			}
			//全屏结束
			topValue=e.pageY;
			leftValue=e.pageX;
		})
		$(".box").mouseup(function(e){
			 $(".box").off();
		})
		 return false;
	})
}
function iconMouseup(){
	$("#listicon").find("li").mouseup(function(oEvent){
		//.dblclick()
		console.log();
		oEvent.stopPropagation();
		 if (!oEvent) oEvent=window.event;
		$("#righthand").remove();
		 if (oEvent.button==2) {
			 //绑定鼠标右击事件
	    	$("#righthand").remove();
	    	var x=oEvent.clientX;
	    	var y=oEvent.clientY;
	    	var rightTag="<div id='righthand' " +
	    			"style='box-shadow:1px 1px 5px #e1e1e1;display:none;z-index:99999;position:fixed;background:#fff;width:200px;height:300px;left:"+x+"px;top:"+y+"px;'>" +
	    					"</div>";
	    	$("body").append(rightTag);
	    	$("#righthand").show(300);
	    }
		 
		 var righthand=$("#righthand");
		    var listright=$("#listright");
		    if(righthand.length>0&&listright.length==0){
		    	//其他地方点击
		    	var rightTag2="<ul id='listright' class='listright'>"+
		    					"<li><a id='open'>打开</a></li>" +
		    					"<li><a onclick='clicks()'>编辑</a></li>" +
		    					"<li><a>删除</a></li>" +
		    					"</ul>";
		    	$("#righthand").append(rightTag2);
		    	$("#open").click(function(){
		    		$(oEvent.target).parent("a").dblclick();
		    		$("#footerlist").hide(300);
		    		$("#righthand").hide(300);
		    	})
		    	$("#righthand").contextmenu(function(e){
		    		$("#footerlist").hide(300);
		    		e.preventDefault();
		    	});
		    }else{
		        //$("#righthand").remove();
		    }
	})
	$("#content,#footer").not("#righthand").click(function(){
		var righthand=$("#righthand");
	    var listright=$("#listright");
	    if(righthand.length>0&&listright.length>0){
	    	$("#righthand").remove();
	    }
	})
	//在这里你就可以自己定义事件的函数啦
	$("#content").not("#righthand,li").mouseup(function(oEvent) {
	    if (!oEvent) oEvent=window.event;
	    if (oEvent.button==2) {
	    	$("#righthand").remove();
	    	var x=oEvent.offsetX;
	    	var y=oEvent.offsetY;
	    	$(".box").append("<div id='righthand' style='box-shadow:1px 1px 5px #e1e1e1;display:none;z-index:99999;position:fixed;background:#fff;width:200px;height:300px;left:"+x+"px;top:"+y+"px;'></div>");
	    	$("#righthand").show(300);
	    }
	    
	    var righthand=$("#righthand");
	    var listright=$("#listright");
	    if(righthand.length>0&&listright.length==0){
	    	var rightTag="<ul id='listright' class='listright'>" +
			    			"<li><a onclick='main.refresh()'>刷新页面</a></li>" +
			    			"<li><a onclick='main.createNew()'>新建文件夹</a></li>" +
			    			"<li><a onclick=''>个性化设置</a></li>" +
			    		"</ul>";
	    	$("#righthand").append(rightTag);
	    	$("#righthand").contextmenu(function(e){
	    		$("#footerlist").hide(300);
	    		e.preventDefault();
	    	});
	    }else{
	        //$("#righthand").remove();
	    }
	})
}
